<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
  让用户选择图片， 马上在页面中显示出来
 
  实现方式

  1 英雄列表的时候实现过
    必须要后台配合 才能实现在 html页面中 显示图片！！！ 

  2 新方式 
    在不需要后台的帮助下也能实现 选择图片后 即时显示！！！！ 
     URL.createObjectURL
 -->

  <img src="" alt="">
  <input type="file" name="" id="">

  <script>

    const fileDom = document.querySelector("input");
    const img = document.querySelector("img");

    fileDom.onchange = function () {
      //  获取到文件 存在浏览器的内存中。。。 
      const file = this.files[0];

      // 对象 方法 做到 把 浏览器内存中的图片文件 获取到该文件在内存的 src 路径 
      const src = URL.createObjectURL(file);

      // 赋值给图片标签
      img.src = src;
      console.log(src);
    }
  </script>


</body>

</html>